<template>
  <view class="wrap">
    <view class="tab_bar u-border-bottom">
      <u-tabs
        name="cate_name"
        class="bd t1"
        count="cate_count"
        activeColor="#18C7E2"
        bar-height="0"
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <swiper
      class="scroll-view-height"
      :style="{ height: swiperHeight + 'px' }"
      :current="current"
      :duration="300"
      @animationfinish="animationfinish"
    >
      <swiper-item>
        <scroll-view scroll-y="true" :style="{ height: swiperHeight + 'px' }">
          <view class="bd dbox">
            <view class="s-list" v-if="unread.length != 0">
              <view
                class="s-item u-border-bottom"
                v-for="(v, index) in unread"
                :key="index"
                @tap="goDetail(v)"
              >
                <image
                  :src="v.fromAvatar"
                  mode="aspectFit"
                  class="imgs"
                ></image>
                <view class="content">
                  <p class="name u-font-md u-line-1">
                    <span style="font-weight: 600">{{ v.fromName }}</span>
                    <span style="font-size: 12px; color: #bcbcbc"
                      >{{ v.date.substring(0, 10) }}
                      <span class="u-m-l-10">回复了我的评论</span>
                    </span>
                  </p>
                  <p class="context u-font-sm u-line-3">{{ v.content }}</p>
                  <p class="message u-font-xs u-line-4">
                    {{ v.origin.content }}
                  </p>
                </view>
              </view>
            </view>
            <view v-else>
              <u-empty
                text="暂无未读消息"
                mode="message"
                class="empty_center_icon"
              ></u-empty>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y="true" :style="{ height: swiperHeight + 'px' }">
          <view class="bd dbox">
            <view class="s-list" v-if="unread.length != 0">
              <view
                class="s-item u-border-bottom"
                v-for="(v, index) in unread"
                :key="index"
                @tap="goDetail(v)"
              >
                <image
                  :src="v.fromAvatar"
                  mode="aspectFit"
                  class="imgs"
                ></image>
                <view class="content">
                  <p class="name u-font-md u-line-1">
                    <span style="font-weight: 600">{{ v.fromName }}</span>
                    <span style="font-size: 12px; color: #bcbcbc"
                      >{{ v.date.substring(0, 10) }}
                      <span class="u-m-l-10">回复了我的评论</span>
                    </span>
                  </p>
                  <p class="context u-font-sm u-line-3">{{ v.content }}</p>
                  <p class="message u-font-xs u-line-3">
                    {{ v.origin.content }}
                  </p>
                </view>
              </view>
            </view>
            <view v-else>
              <u-empty
                text="暂无已读消息"
                mode="message"
                class="empty_center_icon"
              ></u-empty>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "未读",
        },
        {
          name: "已读",
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

      tabs: [{}, {}],
      swiperHeight: "",
      page: {},
      unread: [],
    };
  },
  onLoad() {
    this.getUnRead(0);
  },
  onShow() {
    // this.current=0
    // this.getUnRead(0)
  },
  onReachBottom() {
    console.log("触底了");
    if (this.page.isLastPage) return;
  },
onPullDownRefresh() {
	this.getUnRead(0)
	if(this.swiperCurrent==0){
		this.getUnRead(0)
	}else{
		this.getUnRead(1)
	}
	setTimeout(()=>{
			uni.startPullDownRefresh();
	},1000)
},
  // onReady() {
  // 	this.getUiStyle()
  // },
  onReady: function (res) {
    var _this = this;
    uni.getSystemInfo({
      success: (resu) => {
        const query = uni.createSelectorQuery();
        //.scroll_y 是滚动区域，得到高度来计算剩余高度
        query.select(".scroll-view-height").boundingClientRect();
        query.exec(function (res) {
          _this.height = resu.windowHeight - res[0].top;
          console.log("打印页面的剩余高度", _this.height);
          _this.swiperHeight = _this.height;
        });
      },
      fail: (res) => {},
    });
  },
  methods: {
    goDetail(v) {
      //已读评论
      this.getChangeMessage(v.id);
      console.log(v);
      uni.navigateTo({
        url: `messageDetial?obj=${encodeURIComponent(JSON.stringify(v))}`,
      });
    },
    //读取消息
    getChangeMessage(id) {
      this.config
        .get("/projectionHall/changeCommentReadState", {
          id,
        })
        .then((res) => {
          console.log(res);
        });
    },
    //获取消息 默认unRead 未读    readed已读
    getUnRead(changidx) {
      this.config
        .get("/projectionHall/getAllComment", {
          type: changidx == 0 ? "unRead" : "readed",
        })
        .then((res) => {
          console.log(res.hasOwnProperty(res.data.data));
          this.unread = res.data.data || [];
        });
    },
    change(index) {
      console.log(index);
      this.current = index;
      this.swiperCurrent = index;
      this.unread = [];
      this.getUnRead(index);
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
    },
    animationfinish(e) {
      let current = e.detail.current;
      this.swiperCurrent = current;
      this.current = current;
      console.log(e);
      this.getUnRead(current);
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  overflow: hidden;
  background-color: white;
}

.tab_bar {
  width: 100%;
  position: fixed;
  z-index: 99;
}

.scroll-view-height {
  margin-top: 44rpx;
}

.dbox {
  padding: 30rpx 0;
}

// .s-list {
//   padding: 30upx;
//   width: 100%;
// }
.s-item {
  width: 100%;
  padding: 20rpx 15rpx;
  display: flex;
  align-items: flex-start;
  background-color: white;
  justify-content: space-between;

  .imgs {
    width: 80rpx;
    height: 80rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 20rpx;
    line-height: 44rpx;

    .name {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 40rpx;
    }

    .context {
      font-weight: 400;
      margin: 10rpx 0 10rpx 0;
      width: 600rpx;
    }

    .message {
      background-color: #f6f7f9;
      padding: 12rpx;
      color: #848484;
      width: 600rpx;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  /* 	page{
		background-color: #1b1c1e !important;
	} */
  .bd {
    background-color: #1b1c1e !important;
  }

  .t1 {
    color: #ccc !important;
  }
}

@media (prefers-color-scheme: light) {
  page {
    background-color: #f7f7f7;
  }
}
</style>
